<template>
  <el-dialog v-model="props.dialogVisible" width="1200" @close="handleClose" class="pdf-dom" ref="fileArea">
    <el-descriptions class="margin-top" title="活动计划详情" :column="2" border>
      <template #extra>
        <el-button type="primary" @click="handlePrint()" v-if="isDown">打印</el-button>
        <el-button type="primary" @click="downloadPdf2()" v-if="isDown">导出</el-button>
      </template>
    </el-descriptions>
    <div>
      <!-- :style="{
          boxShadow: `var(--el-box-shadow)`,
        }" -->
      <div class="list-title"><el-icon class="icon">
          <DocumentRemove />
        </el-icon>活动计划信息</div>
      <el-descriptions :column="3">
        <el-descriptions-item width="100px" label-class-name="labelWhite" label="收费站"> {{props.rowDetails.deptName}} </el-descriptions-item>
        <el-descriptions-item width="100px" label-class-name="labelWhite" label="年度"> {{ moment(props.rowDetails.activityTime).format('YYYY')}}
        </el-descriptions-item>
        <el-descriptions-item width="100px" label-class-name="labelWhite" label="活动日期"> {{props.rowDetails.activityTime}} </el-descriptions-item>
      </el-descriptions>
    </div>

    <div class="list-title"><el-icon class="icon">
        <DocumentRemove />
      </el-icon>基本信息</div>
    <el-descriptions :column="3" border>
      <el-descriptions-item width="100px" label-class-name="labelWhite" label="活动名称"> {{props.rowDetails.activityName}} </el-descriptions-item>
      <el-descriptions-item width="100px" label-class-name="labelWhite" label="活动单位"> {{props.rowDetails.deptName}}</el-descriptions-item>
      <el-descriptions-item width="100px" label-class-name="labelWhite" label="活动时间"> {{ moment(props.rowDetails.activityTime).format('YYYY-MM-DD')}}
      </el-descriptions-item>
      <el-descriptions-item width="100px" label-class-name="labelWhite" label="活动类型"> <dict-tag :options="activity_type"
          :value="props.rowDetails.activityType" /></el-descriptions-item>
      <el-descriptions-item width="100px" label-class-name="labelWhite" label="活动方式"> <dict-tag :options="activity_mode"
          :value="props.rowDetails.activityMode" /></el-descriptions-item>
      <el-descriptions-item width="100px" label-class-name="labelWhite" label="活动地点"> {{props.rowDetails.activityPlace}} </el-descriptions-item>
      <el-descriptions-item width="100px" label-class-name="labelWhite" label="活动人数"> {{props.rowDetails.activityPerson}} </el-descriptions-item>
      <el-descriptions-item width="100px" label-class-name="labelWhite" label="备注" :span="3"> {{props.rowDetails.remark}} </el-descriptions-item>
    </el-descriptions>

    <div class="list-title"><el-icon class="icon">
        <DocumentRemove />
      </el-icon>相关文件</div>

    <el-table :data="fileList" table-layout="auto" :show-header="false" show-overflow-tooltip>
      <el-table-column prop="originalFilename" label="" />
      <el-table-column prop="name" label="" />
      <el-table-column label="" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click.stop="previewFun(scope.row)">预览</el-button>
          <el-button link type="primary" icon="Edit" @click.stop="handleExport(scope.row)">下载</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="list-title"><el-icon class="icon">
        <DocumentRemove />
      </el-icon>现场照片</div>
    <el-empty description="暂无图片" v-if="imgList.length==0" />
    <div v-else>
      <el-image class="img-item" :src="item" fit="fit" :preview-src-list="imgList" v-for="(item,index) in imgList" :key="index" />
    </div>
    <Viewer ref="fileViewerRef" :dialog-doc="dialogDoc" />
  </el-dialog>
</template>
  
<script setup>
import moment from 'moment'
import download from "downloadjs"
import { htmlToPdf } from '@/utils/htmlToPdf';
import { defineProps } from "vue";
import Viewer from "@/components/Custom/viewer.vue";
const { proxy } = getCurrentInstance()
const { activity_type, activity_mode } = proxy.useDict('activity_type', 'activity_mode');
const emit = defineEmits(["handleClose"]);
const props = defineProps({
  dialogVisible: {
    type: Boolean,
  },
  rowDetails: {
    type: Object,
  }
});
// const commitUrl = 'http://10.0.23.58:8092'
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const isDown = ref(true)
const fileArea = ref();
const list = ref([])
const imgList = ref([])
let dialogDoc = ref(false);
const fileViewerRef = ref(null);
const fileList = ref([])

watch(() => props.rowDetails.imgList, value => {
  if (value&&value.includes(',')) {
    let arr = []
    value.split(',').forEach(item => {
      arr.push(baseUrl + item)
    })
    imgList.value = arr
  } else {
    imgList.value = [baseUrl + value]
  }


}, { deep: true })

watch(() => props.rowDetails.fileList, value => {
  props.rowDetails.fileList.forEach(item => {
    fileList.value.push({ ...item, originalFilename: getFileName(item.url) })
  })

}, { deep: true })


// 获取文件名称
function getFileName(name) {
  // 如果是url那么取最后的名字 如果不是直接返回
  if (name.lastIndexOf("/") > -1) {
    return name.slice(name.lastIndexOf("/") + 1);
  } else {
    return name;
  }
}

const downloadPdf2 = () => {
  isDown.value = false
  htmlToPdf('pdf-dom', '活动计划详情');

  setTimeout(() => {
    isDown.value = true
  }, 2000);
}


const handleClose = () => {
  emit("handleClose");
}


const handlePrint = () => {
  // 使用Element UI的print方法打印表格
  isDown.value = false
  window.print();
}

function handleExport(file) {
  download(baseUrl + file.url, getFileName(file.url), getFileName(file.url).split('.')[1])
}

// 预览
const previewFun = (file) => {
  dialogDoc.value = true;
  let data = file;
  // 上传过的文件组成完成的网络路径
  if (file.url&&file.url.indexOf(',')==-1) {
    data.src = `${baseUrl}${file.url}`;
  }else if(file.url&&file.url.indexOf(',')!=-1){
    let src=file.url.split(',')[0]
    data.src = `${baseUrl}${src}`;
    file.url=src
  }


  const arr=data.url.split(".");

  const suffix = arr[arr.length-1];
  if (suffix == "docx"||suffix == "doc") {
    fileViewerRef.value?.viewDocx(data,'活动计划');
  } else if (suffix == "xlsx"||suffix == "xls") {
    fileViewerRef.value?.viewXlsx(data);
  } else if (suffix == "jpg" || suffix == "jpeg" || suffix == "png") {
    fileViewerRef.value?.viewImg(data);
  } else if (suffix == "pdf") {
    fileViewerRef.value?.viewPdf(data);
  }
};
</script>
  
  <style scoped>
.content-cus .el-descriptions__cell {
  border: none !important;
}
.border-top {
  border-top: 1px solid #ebeef5;
}
.padding-none {
  padding: 0 !important;
}
.coumn-cus {
  padding: 8px 11px;
  min-height: 43px;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.text-right {
  text-align: right;
}

.my-label {
  background: #fff !important;
}

.list-title {
  line-height: 40px;
  text-align: center;
  font-weight: 600;
  display: flex;
  align-items: center;
  margin: 10px 0 15px;
  font-size: 16px;
  color: var(--el-color-primary);
}
.list-title.border-top {
  border-top: 1px solid #ebeef5;
}
.flex {
  display: flex;
  align-items: center;
}
.flex .flex-sub {
  flex: 1;
  line-height: 40px;

  text-align: center;
}
.flex .flex-sub:first-child {
  border: none;
}
.flex .flex-sub > div {
  border: 1px solid #ebeef5;
  border-top: none;
  border-right: none;
}
.flex .flex-sub > div:last-child {
  border-bottom: none;
}
.ul {
  width: 100%;
  height: 126px;
}
.list-text {
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #ebeef5;
  padding: 0 10px;
}
.list-text:nth-child(2) {
  height: 45px;
  line-height: 45px;
}
.list-text:last-child {
  border-bottom: none;
}

.labelWhite {
  background: #fff !important;
}
.padding {
  padding: 20px 20px 40px 0;
  border-right: 1px solid #ebeef5;
  border-left: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
}

.margin-bottom {
  margin-bottom: 15px;
}
.el-descriptions__title {
  padding-left: 112px;
}
.icon {
  margin-right: 8px;
  font-size: 18px;
  color: var(--el-color-primary);
}
.img-item {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  border: 1px solid #f5f5f5;
  border-radius: 10px;
  margin-bottom: 20px;
}

.pdf-dom{
  padding-bottom: 20px;
}
</style>
  